<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.router-link-active {
			color: red;
		}
	</style>
</head>
<body>

	<div id="app">
	</div>
	
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
	<script>
		
		var Home = { template: '<div>This is Home</div>' };
		var Foo = { template: '<div>This is Foo</div>' };
		var Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' };

		var router = new VueRouter({
		  mode: 'history',
		  base: 'C:/wamp/www/wbc/vue-router/005-命名路由.html#/', // __dirname
		  routes: [
		    { path: '/', name: 'home', component: Home },
		    { path: '/foo', name: 'foo', component: Foo },
		    { path: '/bar/:id', name: 'bar', component: Bar }
		  ]
		});

		new Vue({
		  router,
		  template: `
		    <div id="app">
		      <h1>Named Routes</h1>
		      <p>Current route name: {{ $route.name }}</p>
		      <ul>
		        <li><router-link :to="{ name: 'home' }">home</router-link></li>
		        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
		        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
		      </ul>
		      <router-view class="view"></router-view>
		    </div>
		  `
		}).$mount('#app');

	</script>
</body>
</html>